<template>
  <div class="permission-assign-container">
    <div class="zahnghao">
      <span>当前账号 </span>
    <el-select
        v-model="selectedAccount"
        placeholder="账号选择"
        placement="bottom"
     >
      <el-option
          v-for="account in permissionStore.filteredUsers"
          :key="account.id"
          :label="account.username"
          :value="account.id"
      />
    </el-select>
  </div>
    <el-table
        v-loading="permissionStore.loading"
        :data="permissionStore.menuList"
        :tree-props="tableTreeProps"
        element-loading-text="加载中..."
        row-key="selfid"
        style="width: 100%"
    >
      <el-table-column label="序号" prop="index" width="80">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="菜单id" prop="selfid" width="120"/>
      <el-table-column label="菜单名称" prop="name"/>
      <el-table-column label="权限状态" width="120">
        <template #default="scope">
          <el-switch
              v-model="scope.row.flag"
              :active-value="1"
              :inactive-value="0"
              @change="handleRightChange(scope.row.selfid, scope.row.flag === 1,scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue'
import {usePermissionStore} from '@/stores/permission'
import { updateRight } from '@/api/permission'


const permissionStore = usePermissionStore()
const selectedAccount = ref<number>()
  const usernamesel=ref('')

const tableTreeProps = {
  children: "childs"
}

const handleRightChange = async (menuId: number, enabled: boolean,row:any) => {



  
  
  const success = await permissionStore.updateMenuRight(menuId, enabled)
  if (!success) {
    await permissionStore.fetchMenuList(selectedAccount.value)
  }

  let params = {
        username: '',
        menuid: 0,
        flag:  1 
      }

      

  permissionStore.menuList.forEach((item)=>{
    if (item.selfid==row.pid) {
      if (item.flag==0&&enabled) {
        params.username=usernamesel.value;
        params.menuid=item.selfid
        if (enabled) {
          params.flag=1
        }else{
          params.flag=0
        }

        
      }
    }

    if (item.selfid==row.selfid) {
      if (item.childs.length>0&&!enabled) {        
        item.childs.forEach(async (item)=>{
          if (item.flag=='1') {
            params.username=usernamesel.value;
            params.menuid=item.selfid;
            params.flag='0'
            
            const successa = await updateRight(params)
          }
          
        })
      }
    }
  })

  if (params.menuid!=0) {
    const successa = await updateRight(params)
    await permissionStore.fetchMenuList(selectedAccount.value,true)

  }



}

const initializeData = async () => {
  await permissionStore.fetchSystemUsers()
  if (permissionStore.filteredUsers.length > 0) {
    const firstUser = permissionStore.filteredUsers[0]
    selectedAccount.value = firstUser.id
    permissionStore.selectedUsername = firstUser.username
    await permissionStore.fetchMenuList(firstUser.id)
  }
}

onMounted(() => {
  initializeData()
})



watch(selectedAccount, async (newValue) => {
  if (newValue) {
    const selectedUser = permissionStore.filteredUsers.find(user => user.id === newValue)
    if (selectedUser) {
      usernamesel.value= selectedUser.username
      
      permissionStore.selectedUsername = selectedUser.username
      await permissionStore.fetchMenuList(newValue)
    }
  }
})
</script>
<style lang="scss" scoped>
.permission-assign-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.el-select {
  width: 200px;
}

.zahnghao{
  margin-bottom: 20px;
}
</style>
